<template>
  <div>
    <el-container>
      <el-header>
        <header>
          <div class="head-left">
            <div class="top-left-one">
              <div class="yuan"></div>
              <div class="log">绘世界HSJ</div>
            </div>
            <div class="top-right-one">
              <div class="top-left-img">
                <img src="../../assets/img/扩展图标.png" alt="" />
              </div>
              <el-row :gutter="20">
                <el-input
                  v-model="input2"
                  placeholder="搜索"
                  :prefix-icon="Search"
                />
              </el-row>
            </div>
          </div>
          <div class="head-right">
            <div class="you">
              <img src="../../assets/img/邮件图标.png" alt="" />
            </div>
            <div class="ti">
              <img src="../../assets/img/提醒图标.png" alt="" />
            </div>
            <div class="all" @click="fn">
              <div class="ge">
                <img src="../../assets/img/个人头像.png" alt="" />
              </div>
              <span class="ming">木子李打击</span>
              <span class="xia"
                ><img src="../../assets/img/下箭图.png" alt=""
              /></span>
            </div>
          </div>
          <div class="ger" v-show="tshow">
            <div class="top">
              <div class="tleft" @click="tologin">
                <img src="../../assets/img/个人头像.png" alt="" />
              </div>
              <div class="tmidden">
                <p>木子李…</p>
                <button>后台管理员</button>
              </div>
              <div class="tright">
                <li>个人中心></li>
              </div>
            </div>
            <div class="bottom">
              <ul>
                <li>
                  <p>帮助中心</p>
                  <span>点击进入</span>
                </li>
                <li>在线客服</li>
                <li>点击进入</li>
                <li>账号设置</li>
                <li>
                  <p>切换账号</p>
                  <span>切换</span>
                </li>
                <li>退出账号</li>
              </ul>
            </div>
          </div>
        </header>
      </el-header>
      <el-container>
        <el-aside width="200px" class="mian-left">
          <router-link
            :to="item.route"
            v-for="(item, index) in list"
            :key="index"
            custom
            v-slot="{ navigate, isActive }"
          >
            <li @click="navigate">
              <div class="ck" :class="{ active: isActive }">
                <span class="iconfont" :class="'icon-' + item.url"></span>
                <span>{{ item.title }}</span>
                <span>></span>
              </div>
              <transition
                name="slide-fade"
                enter-active-class="animate__animated animate__fadeInDown"
                leave-active-class="animate__animated animate__fadeInDown"
              >
                <ul v-if="isActive">
                  <router-link
                    :to="value.route"
                    v-for="(value, index) in item.children"
                    :key="index"
                    custom
                    v-slot="{ navigate, isActive }"
                  >
                    <li @click="navigate" :class="{ active: isActive }">
                      {{ value.title }}
                    </li>
                  </router-link>
                </ul>
              </transition>
            </li>
          </router-link>
          <div class="chi">
            <img src="../../assets/img/齿轮.png" alt="" />
          </div>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const show = ref(true);
    const input2 = ref("");
    const tabPosition = ref("left");
    const tshow = ref<boolean>(false);
    const list = [
      {
        title: "我的首页",
        route: "/home/myhome",
        url: "user-filling",
      },
      {
        title: "个人中心",
        route: "/home/myzhongx",
        url: "edit-filling",
      },
      {
        title: "财务统计",
        route: "/home/mycaiwu",
        url: "file-common-filling",
        children: [
          {
            title: "月度业绩",
            route: "/home/mycaiwu/yuedu",
          },
          {
            title: "员工工资",
            route: "/home/mycaiwu/yuangong",
          },
        ],
      },
      {
        title: "学员管理",
        route: "/home/mystudents",
        url: "meh-filling",
        children: [
          {
            title: "学员信息",
            route: "/home/mystudents/xueyuan",
          },
          {
            title: "班级管理",
            route: "/home/mystudents/banji",
          },
        ],
      },
      {
        title: "教师管理",
        route: "/home/mytecher",
        url: "task-filling",
      },
      {
        title: "咨询管理",
        route: "/home/zixun",
        url: "layout-filling",
        children: [
          {
            title: "轮播",
            route: "/home/zixun/lunbo",
          },
          {
            title: "文章",
            route: "/home/zixun/wenz",
          },
        ],
      },
      {
        title: "售后服务",
        route: "/home/shouhou",
        url: "check-item-filling",
      },
    ];
    const router = useRouter();
    const fn = () => {
      tshow.value = !tshow.value;
    };
    const tologin = () => {
      router.push({ path: "/login" });
    };
    return { input2, Search, tabPosition, list, show, tshow, fn, tologin };
  },
});
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
html,
body {
  height: 100%;
}
header {
  width: 100%;
  height: 42.5px;
  background: #446ce3;
  box-shadow: 0px 0px 6px 9px rgba(153, 153, 153, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .head-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
    .top-left-one {
      width: 135px;
      height: 26.5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yuan {
        width: 27px;
        height: 26.5px;
        background: #ffffff;
        border-radius: 16px;
      }
      .log {
        width: 98px;
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
    }
    .top-right-one {
      width: 160px;
      height: 26.5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 20px;
      .top-left-img {
        width: 12px;
        height: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .el-input__inner {
        width: 138px;
        height: 22px;
        background: #f5f5f5;
        border-radius: 50px;
        color: #366deb;
      }
      /deep/ .el-input__inner::placeholder {
        color: #366deb;
        font-size: 13px;
        font-weight: 600;
      }
    }
  }
  .head-right {
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .all {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100px;
    }
    .you {
      width: 22px;
      height: 13px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ti {
      width: 18px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ge {
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ming {
      width: 46px;
      .ellipsis;
      color: #eff1fc;
    }
    .xia {
      display: block;
      width: 9px;
      height: 7px;
    }
  }
  .ger {
    position: absolute;
    right: 10px;
    top: 44.5px;
    z-index: 5;
    width: 250px;
    .top {
      width: 100%;
      height: 80px;
      background: @theme1-color;
      display: flex;
      padding: 0 10px 0 15px;
      align-items: center;
      .tleft {
        display: flex;
        flex: 1;
        border-radius: 50%;
        height: 50px;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .tmidden {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 40px;
        color: #fff;
        button {
          width: 70px;
          height: 20px;
          background: orange;
          border-radius: 6px;
          color: #fff;
          font-size: 12px;
          border: none;
        }
      }
      .tright {
        display: flex;
        flex: 1;
        align-items: center;
        color: #fff;
        justify-content: flex-end;
      }
    }
    .bottom {
      width: 100%;
      background: #fff;
      ul {
        li {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          span {
            color: #999999;
          }
          &:nth-of-type(6) {
            margin-top: 50px;
          }
          &:nth-of-type(5) {
            padding-right: 50px;
          }
        }
      }
    }
  }
}
.mian-left {
  width: 162px;
  height: 677px;
  background: #ffffff;
  position: fixed;
  top: 42.5px;
  left: 0;
  bottom: 0;
  padding-top: 50px;
  li {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    .ck {
      width: 100%;
      padding: 0 10px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    span {
      &:nth-of-type(1) {
        margin-left: 25px;
        font-size: 20px;
      }
    }
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 35px;
        .center();
      }
    }
  }
  .active {
    color: @theme1-color;
    span {
      &:nth-of-type(3) {
        transform: translateZ(90deg);
      }
    }
  }
  .chi {
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: 20px;
    left: 70px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.main {
  position: fixed;
  top: 42.5px;
  left: 162px;
  bottom: 0;
  right: 0;
}
</style>
